<template>
    <div class="fb-cont">
        <van-popup class="popup-bg" round closeable v-model:show="code" @close="close">
            <div class="popup-box">
                <div class="title">
                    {{ currentDta.pairsName }}
                </div>
                <div class='fb-circle'>
                    <van-circle color="#303492" layer-color="#f4f5f6" :stroke-width="90" v-model:current-rate="rate"
                        :speed="100" :text="text" />
                </div>
                <van-row class="hei22 linehei22">
                    <van-col :span="12" class="c999">{{ t('detail.goumaijia') }}：</van-col>
                    <van-col :span="12" class="c333 a_right">
                        {{ currentDta.startAmount }}
                    </van-col>
                </van-row>
                <van-row class="hei22 linehei22">
                    <van-col :span="12" class="c999">{{ t('detail.xj') }}：</van-col>
                    <van-col :span="12" class="c333 a_right">
                        {{ newPrice }}
                    </van-col>
                </van-row>
                <van-row class="hei22 linehei22">
                    <van-col :span="12" class="c999">{{ t('detail.Side') }}：</van-col>
                    <van-col :span="12" class="c333 a_right">
                        <van-tag :type="currentDta.buyStatus === 1 ? 'primary' : 'danger'">
                            {{ currentDta.buyStatus === 1 ? t('detail.zhang') : t('detail.die') }}
                        </van-tag>
                    </van-col>
                </van-row>
                <van-row class="hei22 linehei22">
                    <van-col :span="12" class="c999">{{ t('detail.xzje') }}：</van-col>
                    <van-col :span="12" class="c333 a_right">
                        {{ currentDta.amount }}
                    </van-col>
                </van-row>
                <van-row class="hei22 linehei22">
                    <van-col :span="12" class="c999">{{ t('detail.jgsj') }}：</van-col>
                    <van-col :span="12" class="c333 a_right">
                        {{ currentDta.secondsConfig.seconds }}{{ currentDta.secondsConfig.secondsTime }}
                    </van-col>
                </van-row>
                <div class="btn-box">
                    <div class="btn1" @click="close">
                        {{ t('confirm') }}
                    </div>
                    <div class="btn2" @click="close">
                        {{ t('detail.cancel') }}
                    </div>
                </div>
            </div>
        </van-popup>
    </div>
</template>

<script setup>
import { ref, watch, onMounted } from 'vue'
import useLanguage from '@/hooks/useLanguage';
const { t } = useLanguage()
const props = defineProps({
    showPup: {
        type: Boolean,
        default: false
    },
    currentDta: {
        type: Object,
        default: {}
    },
    currentRate: {
        type: Number,
        default: 0
    },
    diffTime: {
        type: Number,
        default: 0
    },
    currentPrice: {
        type: [Number, String],
        default: 0
    },
})

const code = ref(false)
watch(() => props.showPup, (n, o) => {
    code.value = n
})

const text = ref(0)
const rate = ref(100)
watch(() => props.diffTime, (n, o) => {
    rate.value = parseInt(parseFloat(100 / props.currentRate) * n)
    text.value = n.toFixed(0) + 's'
})

const newPrice = ref(0)
watch(() => props.currentPrice, (n, o) => {
    newPrice.value = n
})

onMounted(() => {
    text.value = text.value.toFixed(0) + 's'
})

const emit = defineEmits(['updateShowPup'])
function close() {
    emit('updateShowPup', props.currentDta.id)
}
</script>

<style lang="less" scoped>
.fb-cont {
    overflow-x: hidden;
    .popup-bg {
        overflow: hidden;
        border-radius: 10px;
        
        .popup-box {
            border-radius: 10px;
            padding: 12px 25px;
            border: 1px solid #707070;
            width: 325px;
            box-sizing: border-box;
            .title {
                padding-bottom: 17px;
                font-size: 18px;
                color: #000;
                border-bottom: 1px solid #CCCCCC;

                text-align: center;
                margin-bottom: 20px;
            }

            .fb-circle {
                display: flex;
                justify-content: center;
                align-items: center;
            }

            .btn-box {
                display: flex;
                justify-content: space-between;
                align-items: center;
                font-size: 16px;
                padding-top: 10px;

                .btn1 {
                    width: 30%;
                    border-radius: 5px;
                    color: #fff;
                    padding: 10px;
                    margin-right: 2%;
                    background: #a4acb9;
                    text-align: center;
                }

                .btn2 {
                    width: 68%;
                    background: #38BB96;
                    border-radius: 5px;
                    color: #fff;
                    text-align: center;
                    padding: 10px;

                    white-space: nowrap;
                    text-overflow: ellipsis;
                    overflow: hidden;
                }
            }
        }
    }

}
</style>